<template>
    <div>
        <div class="content" id="workList" @scroll="initScorell($event)">
            <van-panel v-for="item in list" v-bind:key="item._id" :title="item.name"
                       :desc="'工作地点：'+(item.province?item.province:'')+'-'+(item.city?item.city:'')+'-'+(item.area?item.area:'')+'  联系人：'+item.contactsMan">
                <div style="padding:0em 1em;">
                    <van-tag mark type="primary">工种：</van-tag>
                    <van-tag v-for="(t,index) in item.workType" :type="radomTag()" style="margin-left:1em;"> {{t}}
                    </van-tag>
                    <br/>
                </div>
                <div slot="footer" style="text-align:right;">
                    <van-button size="small" type="danger" @click="showDetail(item)">查看详情</van-button> &nbsp;
                    <van-button size="small" type="primary" @click="edit(item)">
                        <van-icon name="edit"/>
                        编辑
                    </van-button>
                </div>
            </van-panel>
        </div>
        <van-popup v-model="show">
            <van-panel :title="name" :desc="'联系人:'+contactsMan">
                <van-cell>工作地点：{{position}}</van-cell>
                <van-cell icon="phone" :value="'电话号码：'+ contactsPhone"></van-cell>
                <van-cell>工 种：</van-cell>
                <van-cell icon="contact" color="blue" v-for="(item,index) in workType" :title="`${item}`" :key="item"
                          :value="`${workCount[index]}`?`${workCount[index]}人`:'若干'"></van-cell>
                <p>{{description}}</p>
            </van-panel>
        </van-popup>
    </div>

</template>
<script>
    import http from '../../common/http';
    import {Button, List, Cell, Panel, Icon, Tag, Row, Col, Picker, Search, Popup} from 'vant';

    export default {
        name: "checkJobInfo",
        components: {
            [Button.name]: Button,
            [Icon.name]: Icon,
            [List.name]: List,
            [Cell.name]: Cell,
            [Panel.name]: Panel,
            [Row.name]: Row,
            [Col.name]: Col,
            [Picker.name]: Picker,
            [Search.name]: Search,
            [Popup.name]: Popup,
            [Tag.name]: Tag,

        },
        data() {
            return {
                list: [],
                disabled: false,
                page: 1,
                rows: 10,
                provinces: [
                    {
                        values: [],
                        className: 'column1'
                    },
                    {
                        values: [],
                        className: 'column2',
                        defaultIndex: 2
                    }
                ],
                maxPage: 1,
                show: false,
                name: '',
                position: '',
                contactsMan: '',
                workType: [],
                workCount: [],
                contactsPhone: '',
                description: '',

            };
        },
        created() {
            this.$parent.title = '查看我的招工信息';
            this.$parent.isTabbar = true;
            this.$parent.active = 1;
            this.loadMore();
        },

        methods: {

            radomTag() {
                let arr = ['primary', 'danger', 'success'];
                let rad = Math.floor(Math.random() * 3);
                return arr[rad];
            },
            phone(p) {
                window.location.href = `tel:${p}`;
            },
            loadMore() {
                console.log(this.maxPage < this.page);
                if (this.maxPage < this.page) return;

                this.disabled = true;
                let _id = localStorage.getItem('_id');
                let token = localStorage.getItem('token');
                let findObj = {
                    _id: _id ? _id : http._id,
                    token: token ? token : http.token,
                    name: '',
                    workType: '',
                    province: '',
                    city: '',
                    area: '',
                    page: this.page,
                    rows: this.rows,
                };
                console.log('到了这里');
                http.postJsonData(`/user/job/list`, findObj, (data) => {
                    console.log(data);
                    this.maxPage = Math.floor(data.totalCnt / this.rows);
                    for (let i = 0; i < data.jobs.length; i++) {
                        this.list.push(data.jobs[i]);
                    }
                    this.disabled = false;
                });
            },
            //滚动条
            initScorell(event) {
                let scrollTop = document.getElementById('workList').scrollTop;
                let scrollHeight = document.getElementById('workList').scrollHeight;
                let offsetHeight = document.getElementById('workList').offsetHeight;
                if (scrollTop + offsetHeight == scrollHeight) {
                    this.loadMore();
                }
            },
            //展示详情
            showDetail(item) {
                this.show = true;
                this.name = item.name;
                this.contactsMan = item.contactsMan;
                this.position = item.province + '-' + item.city + '-' + item.area;
                this.description = item.description;
                this.contactsPhone = item.contactsPhone;
                this.workCount = item.workCount;
                this.workType = item.workType;
            },
            //编辑
            edit(item) {
                this.$router.push({path: '/checkJobInfo/editJobInfo', name: 'editJobInfo', params: item});
            },
        }
    }
</script>
<style>
    .content {
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: auto;
    }

    .van-popup {
        width: 100%;
    }
</style>

